<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：针对css样式的属性和属性值
		 css()             功能添加任何样式下的属性和属性值
		                    1个参：获取集合元素中第一个元素的css属性值
							2个参：设置匹配集合元素中所有元素属性和属性值
							n个参：多层设置匹配集合元素中所有元素属性和属性值
							语法：css({
								"属性1":"属性值1"，
								"属性2":"属性值2"
							})
							.btn{
								border：1px solid red；
							}
		 height()和width()      功能：匹配集合元素中第一个元素的高度和宽度值
		                        无参：获取匹配元素集合元素中第一个元素的高度和宽度
		                        有参：设置匹配元素集合元素中第一个元素的高度和宽度
		 outerHeight和outerWidth()  
		                        功能：元素的宽高度
								无参：获取元素款高度，包含内边距+边框
								有参：只允许传bool值，true 外加一个外边距
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .box{
				 background-color: #ffaaff;
				 margin: 20px;
				 padding: 20px;
				 border: 5px solid #ffff00;
				 border-style: dashed;
			 }
			 .result{
				 margin-top: 10px;
				 font-weight: bold;
			 }
		 </style>
	</head>
	<body>
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取背景颜色</button>
		<button id="setColorBtn">设置背景颜色</button>
		<button id="setBtn">设置所有</button>
		<button id="getWidthBtn">获取元素宽度</button>
		<button id="gbBtn">获取元素高度【包含内边距+边框】</button>
		<button id="bpmBtn">获取元素高度【包含内边距+边框+外边距】</button>
		<!-- 2.显示效果提示区域 -->
		<div id="result" class="result"></div>
		<script>
			/*1.点击获取背景颜色 按钮 货期背景颜色值*/
			$("#getColorBtn").click(function(){
				//jq css("属性名") 获取属性值
				var bgColor=$(".box").css("background-color")
				//显示区域--提示：获取的颜色属性值
				$("#result").text("获取的背景颜色值："+bgColor)
			});
			/*2.点击 设置背景颜色 按钮设置背景颜色*/
			$("#setColorBtn").click(function(){
				//.box添加颜色
				$(".box").css("background-color","orangered");
				//#result 添加文本颜色变为橙色
				$("#result").text("效果已经修改为橙色")
			});
			/*3.点击设置多层效果*/
			$("#setBtn").click(function(){
				$(".box").css({
					"width":"200px",
					"height":"200px",
					"background-size":"100% 100%",
					"background-image":"url(../img/1.gif)",
					"border-radius":"50%",
					"box-shadow":"10px 10px 50px #ffaaff",
					
				})
			});
			/*4.点击获取元素宽度 按钮 点击获取元素宽高度*/
			$("#getWidthBtn").click(function(){
				var w=$(".box").width(300);
				$("#result").text("获取元素的宽度是"+w+"px")
			});
			/*5.点击获取元素高度【..】按钮 算高度是*/
			$("#gbBtn").click(function(){
				var gbp=$(".box").outerHeight();
				$("#result").text("高度为"+gbp+"px")
			});
			/*6.点击outerHeight获取元素高度【..】按钮  传bool*/
			$("#bpmBtn").click(function(){
				var bpm=$(".box").outerHeight(true);
				$("#result").text("实际元素高度为"+bpm+"px")
			});
		</script>
	</body>
</html>